<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>品牌列表</title>
<style type="text/css">
.infodiv {
	display: none;
	/* border:1px solid #000;
		display:block; */
	width: 550px;
	height: 40px;
	position: absolute;
}

table {
	margin-top: 20px;
	border: 1px solid #000;
	text-align: center;
}

table tr {
	height: 30px;
	font-size: 15px;
}

table tr td {
	width: 184px;
	border: 1px solid #000;
}

.border {
	border: 1px solid #000;
}

label, .goodsid {
	vertical-align: middle;
}

.border2 {
	border: 0px;
}

input {
	border: 0px;
	text-align: center;
	width: 145px;
	background-color: #cfcfcf;
}

#ipage {
	color: #4f4f4f;
	width: 20px;
	height: 20px;
	display: inline-block;
	text-align: center;
	border-radius: 2px;
	background-color: #E5E5E5;
	cursor: pointer;
}

#apage {
	color: #4f4f4f;
	width: 20px;
	height: 20px;
	display: inline-block;
	text-align: center;
	border-radius: 2px;
	background-color: #EED8AE;
	cursor: pointer;
}

#tpage {
	color: #4f4f4f;
	width: 40px;
	height: 20px;
	display: inline-block;
	text-align: center;
	border-radius: 2px;
	background-color: #EED8AE;
	cursor: pointer;
}

#dpage {
	color: #4f4f4f;
	width: 50px;
	height: 20px;
	display: inline-block;
	text-align: center;
	border-radius: 2px;
	background-color: #EED8AE;
	cursor: pointer;
}

.info {
	width: 55px;
	height: 25px;
	cursor: pointer;
	float: left;
	text-align: center;
	margin: 0 auto;
	margin-left: 35px;
	line-height: 25px;
	font-size: 13px;
	border-right: solid 1px black;
}

.update_content_delete {
	height: 25px;
	width: 55px;
	float: left;
	text-align: center;
	cursor: pointer;
	font-size: 13px;
	 margin : 0 auto;
	line-height: 25px;
	margin: 0 auto;
}

tr td img {
	width: 16px;
	height: 16px;
}
a{
  text-decoration: none;
}
.edit:hover{
            font-weight: bold;
            color: blue;
            text-decoration:underline;
        }
.delete:hover{
            font-weight: bold;
            color: blue;
            text-decoration:underline;
        }
        h1 {
	border-bottom: 1px solid #ccc;
	color: #333;
	font-weight: normal;
	padding: 7px 10px;
	margin: 0 0 10px 0;
	overflow: hidden;
}
body {
	margin: 0px;
	padding: 0px;
	color: #192e32;
	font: 12px Microsoft Yahei, "sans-serif", "Arial", "Verdana";
}

h1 span {
	zoom: 1;
}
h1 .action-span1 {
	color: #4c4c4c;
	font-size: 18px;
	font-weight: normal;
}
.help_sub {
	display: inline-block;
	_display: inline;
	vertical-align: middle;
	margin-left: 10px;
}
p, td, div {
	font: 12px Microsoft Yahei, "sans-serif", "Arial", "Verdana";
}
a:visited {
	color: #335b64;
	text-decoration: none;
}
a:link {
	color: #335b64;
	text-decoration: none;
}
h1 a:visited {
	color: #333;
}
h1 a:link {
	color: #333;
}
h1 .action-span a {
	float: right;
	height: 26px;
	line-height: 26px;
	padding: 0 10px 0 23px;
	background: #c43926 url(../images/icon_add02.gif) no-repeat 6px center;
	border-radius: 3px;
	color: #fff;
	font-size: 13px;
	font-weight: normal;
	text-align: center;
	cursor: pointer;
}
</style>
</head>
<body>
<h1>
<span class="action-span"><a class="addbrand">添加品牌</a></span>
<span class="action-span1"><a href="index.php?act=main">京东 管理中心</a> </span><span class="action-span1" id="search_id"> - 商品品牌 </span>
<div style="clear: both;"></div>
</h1>
	<div style="width: 1260px; margin: 0 auto;">
		<h4 style="margin-left: 20px;">类别列表</h4>
		<table cellpadding="0" cellspacing="0"
			style="border-collapse: collapse;">
			<tr style="font-weight: bold;">
				<td>品牌ID</td>
				<td>品牌名称</td>
				<td>品牌描述</td>
				<td>排序</td>
				<td>页面显示</td>
				<td>操作</td>
			</tr>
			<c:forEach items="${pageBean}" var="list">
				<tr>
					<td>${list.brandid}</td>
					<td>${list.brandname}</td>
					<td>${list.branddesc}</td>
					<td>${list.sortorder}</td>
					<td><img src="${list.isshow}"></td>
					<td><div  class="info"><a class="edit" id="${list.brandid}">编辑</a></div>
					<div id="${list.brandid}" class="update_content_delete">
					<a  class="delete" id="${list.brandid}">删除</a></div></td>
				</tr>
			</c:forEach>
		</table>
	</div>
	<div
		style="width: 750px; margin-left: 350px; font-size: 15px; margin-top: 15px;">
		第&nbsp;${pb.pc}&nbsp;页&nbsp;共&nbsp;${pb.tp}&nbsp;页
		<c:if test="${pb.pc > 1 }">
			<a target="1" class="page" id="tpage">首页</a>
			<a target="${pb.pc-1}" class="page" id="dpage">上一页</a>
		</c:if>
		<%-- 计算begin、end --%>
		<c:choose>
			<%-- 如果总页数不足5页，那么把所有的页数都显示出来！ --%>
			<c:when test="${pb.tp <= 5 }">
				<c:set var="begin" value="1" />
				<c:set var="end" value="${pb.tp }" />
			</c:when>
			<c:otherwise>
				<%-- 当总页数>10时，通过公式计算出begin和end --%>
				<c:set var="begin" value="${pb.pc-5 }" />
				<c:set var="end" value="${pb.pc+5 }" />
				<%-- 头溢出 --%>
				<c:if test="${begin < 1 }">
					<c:set var="begin" value="1" />
					<c:set var="end" value="15" />
				</c:if>
				<%-- 尾溢出 --%>
				<c:if test="${end > pb.tp }">
					<c:set var="begin" value="${pb.tp -4 }" />
					<c:set var="end" value="${pb.tp }" />
				</c:if>
			</c:otherwise>
		</c:choose>
		<%-- 循环遍历页码列表 --%>
		<c:forEach var="i" begin="${begin }" end="${end }">
			<c:choose>
				<c:when test="${i eq pb.pc }">
					<!--当前页不要超链接  -->
					<span id="ipage">${i}</span>
				</c:when>
				<c:otherwise>
					<a target="${i}" class="page"><span id="apage">${i}</span></a>
				</c:otherwise>
			</c:choose>

		</c:forEach>


		<!-- 首页共页上一页下页尾页 -->

		<c:if test="${pb.pc < pb.tp }">
			<a target="${pb.pc+1}" class="page" id="dpage">下一页</a>
			<a target="${pb.tp}" class="page" id="tpage">尾页</a>
		</c:if>
	</div>
	<script type="text/javascript" src="../js/jquery-3.1.0.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".page").click(function(){
				var pc=$(this).attr("target");
				$.getJSON(
						"../BrandServlet?method=quaryAllBrand", {
							pc:pc
						},
						function(data) {
							if(data=="0")
								$("#rightdiv").load("../yf/brandlist.jsp"); 
							});
			});
			$(".edit").click(function(){
				$.getJSON("../BrandServlet?method=quaryEditBrand&id="+$(this).attr("id"), {},
						function(data) {
							$("#rightdiv").load("../yf/editbrand.jsp");

						});
			})
			$(".delete").click(function(){
				alert($(this).attr("id"));
				$.getJSON("../BrandServlet?method=deleteEditBrand&id="+$(this).attr("id"), {},
						function(data) {
							$("#rightdiv").load("../yf/brandlist.jsp");
						});
			})
			$(".addbrand").click(function(){
				$.getJSON("../BrandServlet?method=quaryAddBrand", {},
						function(data) {
							$("#rightdiv").load("../yf/addbrand.jsp");

						});
			})
			
		})
	</script>
</body>
</html>